<template>
    <div class="SHZY-common-layout systemLogs">
        <div class="SHZY-common-layout-center">
            <el-row class="SHZY-common-search-box" :gutter="16">
                <el-form @submit.native.prevent>
                    <el-col :span="6" v-if="activeName=='1'">
                        <el-form-item label="模板">
                            <el-input v-model="listQuery.templateCode" placeholder="请输入模板编码/名称" clearable
                                @keyup.enter.native="search()" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="6" v-if="activeName=='1'">
                        <el-form-item label="数据">
                            <el-input v-model="listQuery.data" placeholder="请输入数据" clearable
                                @keyup.enter.native="search()" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="6" v-if="activeName=='3'">
                        <el-form-item label="模板">
                            <el-input v-model="listQuery.templateId" placeholder="请输入模板ID" clearable
                                @keyup.enter.native="search()" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="6" v-if="activeName=='2'">
                        <el-form-item label="主题">
                            <el-input v-model="listQuery.subject" placeholder="请输入邮件主题" clearable
                                @keyup.enter.native="search()" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="6" v-if="activeName=='2' || activeName=='3'">
                        <el-form-item label="内容">
                            <el-input v-model="listQuery.context" placeholder="请输入内容" clearable
                                @keyup.enter.native="search()" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="用户">
                            <user-select v-model="listQuery.userId" placeholder="请选择用户" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="状态">
                            <el-select v-model='listQuery.execStatus' placeholder='请选择状态' clearable
                                @keyup.enter.native="search()">
                                <el-option v-for="(item, index) in execStatusData" :key="index" :label="item.fullName"
                                    :value="item.enCode"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="时间">
                            <el-date-picker v-model="pickerVal" type="datetimerange" start-placeholder="开始日期"
                                end-placeholder="结束日期" :picker-options="pickerOptions" value-format="timestamp" clearable
                                :editable="false" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item>
                            <el-button type="primary" icon="el-icon-search" @click="search()">
                                {{ $t('common.search') }}</el-button>
                            <el-button icon="el-icon-refresh-right" @click="reset()">{{ $t('common.reset') }}
                            </el-button>
                        </el-form-item>
                    </el-col>
                </el-form>
            </el-row>
            <div class="SHZY-common-layout-main SHZY-flex-main">
                <el-tabs v-model="activeName" type="border-card" class="logTabs" @tab-click="handleTabClick">
                    <div class="SHZY-common-head">
                        <div class="left-btn">
                            <el-button type="primary" size="small" @click="handleResend('All')" icon="el-icon-message">重发
                            </el-button>
                            <el-button v-if="activeName=='1'" type="primary" size="small" @click="handleResend('Error')" icon="el-icon-message">重发异常
                            </el-button>
                        </div>
                        <div class="SHZY-common-head-right">
                            <el-tooltip effect="dark" :content="$t('common.refresh')" placement="top">
                                <el-link icon="icon-ym icon-ym-Refresh SHZY-common-head-icon" :underline="false"
                                    @click="initData()" />
                            </el-tooltip>
                        </div>
                    </div>
                    <el-tab-pane label="消息事件" name="1">
                        <SHZY-table v-loading="listLoading" :data="eventData" has-c
                            @selection-change="handleSelectionChange">
                            <el-table-column prop="creatorTime" :formatter="shzy.tableDateFormat" label="创建时间"
                                width="120" />
                            <el-table-column prop="templateCode" label="模板编码" min-width="120" show-overflow-tooltip />
                            <el-table-column prop="templateName" label="模板名称" min-width="120" show-overflow-tooltip />
                            <el-table-column prop="toUserNames" label="接收用户" min-width="120" show-overflow-tooltip />
                            <el-table-column prop="data" label="数据" min-width="120" show-overflow-tooltip />
                            <el-table-column prop="isStationLetter" label="站内信" width="100">
                                <template slot-scope="scope">
                                    <el-tag v-if="scope.row.isStationLetter == 1" type="success">已执行</el-tag>
                                    <el-tag v-if="scope.row.isStationLetter == 2" type="danger">异常</el-tag>
                                </template>
                            </el-table-column>
                            <el-table-column prop="isEmail" label="邮箱" width="100">
                                <template slot-scope="scope">
                                    <el-tag v-if="scope.row.isEmail == 1" type="success">已执行</el-tag>
                                    <el-tag v-if="scope.row.isEmail == 2" type="danger">异常</el-tag>
                                </template>
                            </el-table-column>
                            <el-table-column prop="isWeChat" label="公众号" width="100">
                                <template slot-scope="scope">
                                    <el-tag v-if="scope.row.isWeChat == 1" type="success">已执行</el-tag>
                                    <el-tag v-if="scope.row.isWeChat == 2" type="danger">异常</el-tag>
                                </template>
                            </el-table-column>
                            <el-table-column prop="isWeCom" label="企业微信" width="100">
                                <template slot-scope="scope">
                                    <el-tag v-if="scope.row.isWeCom == 1" type="success">已执行</el-tag>
                                    <el-tag v-if="scope.row.isWeCom == 2" type="danger">异常</el-tag>
                                </template>
                            </el-table-column>
                            <el-table-column prop="isDingTalk" label="钉钉" width="100">
                                <template slot-scope="scope">
                                    <el-tag v-if="scope.row.isDingTalk == 1" type="success">已执行</el-tag>
                                    <el-tag v-if="scope.row.isDingTalk == 2" type="danger">异常</el-tag>
                                </template>
                            </el-table-column>
                            <el-table-column prop="isSms" label="短信" width="100">
                                <template slot-scope="scope">
                                    <el-tag v-if="scope.row.isSms == 1" type="success">已执行</el-tag>
                                    <el-tag v-if="scope.row.isSms == 2" type="danger">异常</el-tag>
                                </template>
                            </el-table-column>
                            <el-table-column prop="execStatus" label="状态" width="100">
                                <template slot-scope="scope">
                                    <el-tag v-if="scope.row.execStatus == 0" type="info">未执行</el-tag>
                                    <el-tag v-if="scope.row.execStatus == 1" type="success">已执行</el-tag>
                                    <el-tag v-if="scope.row.execStatus == 2" type="danger">异常</el-tag>
                                </template>
                            </el-table-column>
                            <el-table-column prop="errorMsg" label="异常信息" min-width="200" show-overflow-tooltip />
                        </SHZY-table>
                    </el-tab-pane>
                    <el-tab-pane label="邮件" name="2">
                        <SHZY-table v-loading="listLoading" :data="emailData" has-c
                            @selection-change="handleSelectionChange">
                            <el-table-column prop="creatorTime" :formatter="shzy.tableDateFormat" label="创建时间"
                                width="120" />
                            <el-table-column prop="subject" label="邮件主题" min-width="120" show-overflow-tooltip />
                            <el-table-column prop="context" label="内容" min-width="120" show-overflow-tooltip />
                            <el-table-column prop="toUserNames" label="接收人" min-width="120" show-overflow-tooltip />
                            <el-table-column prop="sendDate" label="发送时间" width="120">
                                <template slot-scope="scope">{{ scope.row.sendDate | toDate() }}</template>
                            </el-table-column>
                            <el-table-column prop="execStatus" label="状态" width="100">
                                <template slot-scope="scope">
                                    <el-tag v-if="scope.row.execStatus == 0" type="info">未执行</el-tag>
                                    <el-tag v-if="scope.row.execStatus == 1" type="success">已执行</el-tag>
                                    <el-tag v-if="scope.row.execStatus == 2" type="danger">异常</el-tag>
                                </template>
                            </el-table-column>
                            <el-table-column prop="errorMsg" label="异常信息" min-width="200" show-overflow-tooltip />
                        </SHZY-table>
                    </el-tab-pane>
                    <el-tab-pane label="微信" name="3">
                        <SHZY-table v-loading="listLoading" :data="weChatData" has-c
                            @selection-change="handleSelectionChange">
                            <el-table-column prop="creatorTime" :formatter="shzy.tableDateFormat" label="创建时间"
                                width="120" />
                            <el-table-column prop="templateId" label="模板ID" min-width="120" show-overflow-tooltip />
                            <el-table-column prop="callbackUrl" label="回调Url" min-width="120" show-overflow-tooltip />
                            <el-table-column prop="context" label="内容" min-width="120" show-overflow-tooltip />
                            <el-table-column prop="openIds" label="推送用户openId" min-width="120" show-overflow-tooltip />
                            <el-table-column prop="userNames" label="推送用户名称" min-width="120" show-overflow-tooltip />
                            <el-table-column prop="sendDate" label="发送时间" width="120">
                                <template slot-scope="scope">{{ scope.row.sendDate | toDate() }}</template>
                            </el-table-column>
                            <el-table-column prop="execStatus" label="状态" width="100">
                                <template slot-scope="scope">
                                    <el-tag v-if="scope.row.execStatus == 0" type="info">未执行</el-tag>
                                    <el-tag v-if="scope.row.execStatus == 1" type="success">已执行</el-tag>
                                    <el-tag v-if="scope.row.execStatus == 2" type="danger">异常</el-tag>
                                </template>
                            </el-table-column>
                            <el-table-column prop="errorMsg" label="异常信息" min-width="200" show-overflow-tooltip />
                        </SHZY-table>
                    </el-tab-pane>
                    <pagination :total="total" :page.sync="listQuery.currentPage" :limit.sync="listQuery.pageSize"
                        @pagination="initData" />
                </el-tabs>
            </div>
        </div>
        <Form v-show="formVisible" ref="Form" @close="formVisible = false" />
    </div>
</template>
  
<script>
import { getMessageEventList, getMessageWeChartList, getMessageEmailList, resendMessage } from '@/api/system/message'
import Form from './Form'
export default {
    name: 'system-message',
    components: { Form },
    data() {
        return {
            formVisible: false,
            listLoading: true,
            activeName: '1',
            eventData: [],
            emailData: [],
            weChatData: [],
            multipleSelection: [],
            total: 0,
            listQuery: {
                templateCode: '',
                userId: '',
                data: '',
                templateId: '',
                context: '',
                subject: '',
                startTime: '',
                endTime: '',
                execStatus: '',
                sort: 'desc',
                currentPage: 1,
                pageSize: 20
            },
            pickerOptions: {
                shortcuts: [{
                    text: '最近一周',
                    onClick(picker) {
                        const start = new Date()
                        const end = new Date()
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
                        picker.$emit('pick', [start, end])
                    }
                }, {
                    text: '最近一个月',
                    onClick(picker) {
                        const start = new Date()
                        const end = new Date()
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
                        picker.$emit('pick', [start, end])
                    }
                }, {
                    text: '最近三个月',
                    onClick(picker) {
                        const start = new Date()
                        const end = new Date()
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
                        picker.$emit('pick', [start, end])
                    }
                }]
            },
            pickerVal: [],
            execStatusData: [
                { 'fullName': "未执行", 'enCode': "0" },
                { 'fullName': "已执行", 'enCode': "1" },
                { 'fullName': "异常", 'enCode': "2" }
            ]
        }
    },
    created() {
        this.initData()
    },
    methods: {
        initData() {
            const activeId = this.activeName
            this.listLoading = true
            if (activeId === '1') {
                getMessageEventList(this.listQuery).then(res => {
                    this.eventData = res.data.list
                    this.total = res.data.pagination.total
                    this.listLoading = false
                }).catch(() => {
                    this.listLoading = false
                })
            } else if (activeId === '2') {
                getMessageEmailList(this.listQuery).then(res => {
                    this.emailData = res.data.list
                    this.total = res.data.pagination.total
                    this.listLoading = false
                }).catch(() => {
                    this.listLoading = false
                })
            } else if (activeId === '3') {
                getMessageWeChartList(this.listQuery).then(res => {
                    this.weChatData = res.data.list
                    this.total = res.data.pagination.total
                    this.listLoading = false
                }).catch(() => {
                    this.listLoading = false
                })
            }

        },
        handleTabClick() {
            this.reset()
        },
        handleSelectionChange(val) {
            const res = val.map(item => item.id)
            this.multipleSelection = res
        },
        handleResend(type) {

            if (!this.multipleSelection.length) {
                this.$message({
                    type: 'error',
                    message: '请选择一条数据',
                    duration: 1500,
                })
                return
            }
            const data = {
                activeId: this.activeName,
                type: type,
                ids: this.multipleSelection
            }
            this.$confirm('您确定要重发这些数据吗, 是否继续?', '提示', {
                type: 'warning'
            }).then(() => {
                resendMessage(data).then(res => {
                    this.$message({
                        type: 'success',
                        message: res.msg,
                        duration: 1500,
                        onClose: () => {
                            this.initData()
                        }
                    })
                })
            }).catch(() => { })
        },
        search() {
            if (this.pickerVal && this.pickerVal.length) {
                this.listQuery.startTime = this.pickerVal[0]
                this.listQuery.endTime = this.pickerVal[1]
            } else {
                this.listQuery.startTime = ''
                this.listQuery.endTime = ''
            }
            this.listQuery.currentPage = 1
            this.listQuery.pageSize = 20
            this.listQuery.sort = 'desc'
            this.initData()
        },
        reset() {
            this.pickerVal = []
            this.listQuery.templateCode = ''
            this.listQuery.userId = ''
            this.listQuery.data = ''
            this.listQuery.templateId = ''
            this.listQuery.context = ''
            this.listQuery.subject = ''
            this.listQuery.execStatus = ''
            this.search()
        }
    }
}
</script>
  
<style lang="scss" scoped>
.systemLogs {
    .SHZY-common-layout-main {
        padding: 0;
    }

    .logTabs {
        height: 100%;
    }

    .line1 {
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
        word-break: break-all;
    }

    >>>.el-tabs__content {
        height: calc(100% - 40px);
        padding: 0;

        .el-tab-pane {
            height: calc(100% - 110px);
            overflow: hidden;
        }
    }
}
</style>